<template>
	<view>
		<view class="bg-white" style="width: 100%; position: fixed; top: 0; z-index: 999;"
		      :style="'height:'+custom_bar+'px'"></view>
		<view id="search" class="cu-bar search bg-white fixed" style="width: 100%;padding-left: 22upx; border: none;position: relative;"
		      :style="'top:'+custom_bar+'px'">
			  <image @click="handleToBack" style="width: 24upx;height: 40upx;" src="/static/icon/detail/fanhui-2@2x.png" mode=""></image>
			  <view class="search-form round" style="margin-left: 5%;">
			    <image src="/static/icon/index/sousuo@2x.png" style="width: 26upx; height: 30upx; margin: 0 22upx;"></image>
			    <input :adjust-position="false" v-model="search_word" type="text" placeholder="搜索" placeholder-style="color: #D8D8D8;"
			           confirm-type="search" style="font-size: 28upx; line-height: 20px !important;" @confirm="handleSearch(search_word)" />
			  </view>
		</view>
		<view style="padding: 0 28upx;" :style="'margin-top:'+custom_bar+'px'" v-if="show_flag">
			<view class="item" v-for="(item, index) in search_list" :key="index" @click="handleToArticle(item.browsing_history)">
        {{item.browsing_history && item.browsing_history.title}}</view>
		</view>
    <view v-if="!search_list.length && show_flag" class="justify-center align-center"
          style="width: 100%; padding: 50% 0; flex-direction: column; text-align: center;">
      <image src="/static/image/no_content@2x.png" style="width: 264upx; height: 264upx;"></image>
      <view class="flex justify-center" style="font-size: 24upx; color: #999999;">暂无内容</view>
    </view>
    <view>
      <view class="flex align-center justify-center"
            v-if="search_list.length >= 15"
            style="width: 100%; height: 102upx; padding: 0 50upx;">
        <view style="width: 30%; height: 2upx; background-color: #F1F1F1;"></view>
        <view style="width: 40%; text-align: center;">
          <view v-if="!bottom_flag" style="color: #CACACA; font-size: 24upx; margin: 0 40upx;">到底了</view>
          <view v-else class="action">
            <view class="cu-load" :class="!is_load?'loading':'over'" style="font-size: 28upx; color: #CACACA;"></view>
          </view>
        </view>
        <view style="width: 30%; height: 2upx; background-color: #F1F1F1;"></view>
      </view>
    </view>

	</view>
</template>

<script>
import {browsingHistory_getListByCon} from "api/my/my"
	export default {
		data() {
			return {
				custom_bar: 0, //通知栏高度
				search_list: [], //搜索列表
        bottom_flag: true, //触底标识
        page: 1, //分页
        is_load: false, //加载
        show_flag: false,
        search_word: '',// 关键词
			}
		},
		onLoad() {
			this.custom_bar = uni.getStorageSync('system_info').statusBarHeight;
			this.pageInit()
		},
		methods: {
		  //初始化
		  pageInit(page = 1,search_word, type){
		    this.page = page;
        browsingHistory_getListByCon({page,search_word}).then(res=>{
          if(type){
            this.search_list = [];
          }
          let temp_data = res.data.data;
          if (!temp_data.length) {
            this.bottom_flag = false;
          }else {
            this.search_list = this.search_list.concat(temp_data);
          }
          this.is_load = false;
        }).finally(()=>{
          this.show_flag = true;
        })
      },
      //去文章
      handleToArticle(browsing_history){
		    let {type, id} = browsing_history;
		    const jump_url_obj = {
          article: '/pages/article/article',
          article_product: '/pages/passBand/projectDetail/projectDetail',
          product: '/pages/passBand/otherDetail/otherDetail',
        }
        this.$uniNavigateTo({
          url: jump_url_obj[type],
          query: {
            article_id: id
          }
        })
      },
      handleSearch(search_word){
		    this.search_list = [];
		    this.pageInit(1,search_word)
      },
			//返回
			handleToBack() {
        uni.navigateBack({
          delta: 1
        });
			},
		},
    //上拉加载
    onReachBottom() {
      if (this.bottom_flag) {
        this.is_load = false;
        this.page += 1;
        this.pageInit(this.page);
      }
    },
    //下拉刷新
    onPullDownRefresh() {
      this.page = 1;
      this.bottom_flag = true;
      this.pageInit(1,'', 1);
      uni.stopPullDownRefresh();
    }
	}
</script>

<style scoped lang="scss">
	/deep/ .cu-bar {
	  height: 130upx;
	}

	/deep/ .cu-bar.fixed, .nav.fixed {
	  box-shadow: none;
	}

	/deep/ .cu-bar .search-form {
	  height: 70upx;
	  border: 2upx solid #EDEDED;
	  background-color: white;
	}
	.item {
		font-size: 28upx;
		font-weight: 700;
		padding: 28upx 0 24upx 0;
		border-bottom: 1px solid rgba(0,0,0,0.05);
	}
</style>
